<template>
  <div class="page_wrap">
    <div class="index_row">
      <div class="header_img">
        <img src="../../../static/images/6084ce779a984.png" alt="" />
      </div>

      <el-form
        :model="registerForm"
        :rules="rules"
        size="mini"
        ref="registerForm"
        class="demo-ruleForm"
      >
        <div class="titel">公司法人信息:</div>
        <el-form-item prop="legalName" label="法人姓名">
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-user-solid"
            clearable
            v-model="registerForm.legalName"
            placeholder="请确保联系人真实有效"
          ></el-input>
        </el-form-item>
        <el-form-item prop="legalTel" label="手机号码">
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-phone"
            clearable
            v-model="registerForm.legalTel"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <div class="titel">注册人信息:</div>
        <el-form-item prop="username" label="联系人姓名">
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-user-solid"
            clearable
            v-model="registerForm.username"
            placeholder="请确保联系人真实有效"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userTel" label="手机号码">
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-phone"
            clearable
            v-model="registerForm.userTel"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <div class="inpt_flex">
            <el-input
              style="width: 300px"
              prefix-icon="el-icon-s-claim"
              clearable
              v-model="registerForm.phoneCode"
              placeholder="请输入验证码"
            ></el-input>
            <div class="yzm">
              <div>
                <div>获取验证码</div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input
            style="width: 420px"
            prefix-icon="iconfont  icon-youxiang"
            clearable
            v-model="registerForm.email"
            placeholder="请输入电子邮箱"
          ></el-input>
        </el-form-item>
        <div class="titel">报馆企业信息:</div>
        <el-form-item prop="companyName" label="企业全称">
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-s-cooperation"
            clearable
            v-model="registerForm.companyName"
            placeholder="请输入企业全称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="登录密码">
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-s-cooperation"
            clearable
            v-model="registerForm.password"
            placeholder="请输入登录密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="identityCode">
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-postcard"
            clearable
            v-model="registerForm.identityCode"
            placeholder="请输入统一社会信用代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传营业执照:" prop="license">
          <orderImageUpload v-model="registerForm.license"/>
        </el-form-item>
      </el-form>

      <div @click="hanladd" class="input_but">
        <div class="input_text">
          <div>注册</div>
        </div>
      </div>
      <div class="foot_warp">
        <div class="foot_right">
          <div>想起密码了？</div>
          <div class="foot_text" @click="haldregister(1)">去登录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { register } from "@/api/login";
export default {
  data() {
    return {
      registerForm: {
        companyName: "",
        identityCode: "",
        licence: "",
        legalName: "",
        legalTel: "",
        username: "",
        userTel: "",
        phoneCode: "",
        email: "",
        password: "",
      },
      ruleForm: {},
      fileList: [],
      rules: {
        legalName: [{ required: true, message: "请填写法人姓名", trigger: "blur" }],
        legalTel: [{ required: true, message: "请填写法人手机号码", trigger: "blur" },{
          pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
          message: "请输入正确的电话号码",
          trigger: "blur",
        },],
        username: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
        userTel: [{ required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },],
        email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
        companyName: [{ required: true, message: "请输入企业全称", trigger: "blur" }],
        identityCode: [{ required: true, message: "请输入统一社会信用代码", trigger: "blur" },{
          pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
          message: "请输入正确的社会统一信用代码",
          trigger: "blur",
        },],
        license: [{ required: true, message: "上传营业执照", trigger: "blur" }],
      }
    };
  },
  methods: {
    hanladd() {
      // if (!this.registerForm.username) {
      //   this.$message.error("请输入用户名");
      // }
      // if (!this.registerForm.userTel) {
      //   this.$message.error("请输入注册手机号");
      // }
      // if (!this.registerForm.legalName) {
      //   this.$message.error("请输入法人姓名");
      // }
      // if (!this.registerForm.legalTel) {
      //   this.$message.error("请输入法人电话");
      // }
      // if (!this.registerForm.companyName) {
      //   this.$message.error("请输入企业全称");
      // }
      // if (!this.registerForm.identityCode) {
      //   this.$message.error("请输入统一社会信用代码");
      // }
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          register(this.registerForm).then((res) => {
            console.log(res);
            this.loginform = {
              username: "",
              password: "",
            };
            this.$message.success("注册成功");
            this.haldregister(1);
          });
        }
      });
    },
    haldregister(item) {
      this.$emit("hanldlogin", item);
    }
  }
};
</script>
<style scoped>
.page_wrap {
  padding: 10px 0;
}
.index_wrap {
  width: 100%;
  min-width: 898px;
  min-height: 100vh;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.index_mian {
  width: 640px;
  height: 540px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.titel {
  font-size: 20px;
  color: #666;
  margin-bottom: 10px;
}
.input_wrap {
  line-height: 70px;
}
/* /deep/ .el-input {
  width: 420px !important;
} */
/deep/ .el-input__inner {
  height: 46px !important;
  font-size: 18px;
}
/deep/.el-input--prefix .el-input__inner {
  padding-left: 40px;
}
.input_but {
  margin-top: 20px;
  width: 420px;
  background-color: #3dbbb8;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input_text {
  color: #fff;
  font-size: 20px;
}
.input_but:hover {
  cursor: pointer;
}
.foot_warp {
  margin-top: 20px;
  width: 420px;
  display: flex;
  justify-content: flex-end;
}
.foot_text {
  color: #2e82ff;
}
.foot_right {
  display: flex;
  justify-content: space-between;
}
.foot_text:active {
  opacity: 0.8;
}
.foot_text:hover {
  cursor: pointer;
}
.inpt_flex {
  display: flex;
  align-items: center;
}
.yzm {
  height: 45px;
  width: 118px;
  border: 1px solid #dcdfe6;
  border-top-right-radius: 3px;
  background-color: #2e82ff;
  color: #fff;
  border-bottom-right-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yzm:hover {
  cursor: pointer;
}
.yzm:active {
  opacity: 0.8;
}
.header_img {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.header_img img {
  width: 200px;
  object-fit: contain;
}
</style>